<template>
  <div class="history">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>用户列表</span>
        <el-button type="primary" class="qf-btn qf-r">增加用户</el-button>
      </div>
      <el-row>
        <el-col :span="6">
          <el-input
            placeholder="请输入用户名"
            v-model="params.uname"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
            ></el-button> </el-input
        ></el-col>
        <el-col :span="9">&nbsp;</el-col>
        <el-col :span="9">
          <el-date-picker
            v-model="params.date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker
        ></el-col>
      </el-row>
      <QTable :tableData="tableData" :columns="columns"> </QTable>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pagenum"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import QTable from "@/components/qf-table/Index.vue";
import tableData from "~mock/users/index";
export default {
  components: { QTable },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  data() {
    return {
      params: {
        uname: "",
        pagenum: 1,
        date: [],
      },
      columns: [
        { title: "编号", field: "id" },
        { title: "用户名", field: "uname" },
        { title: "所属角色", field: "role_name" },
        { title: "手机号码", field: "mobile" },
        {
          title: "冻结",
          type: "switch",
          payload: {
            field: "state",
            change: (row) => {
              console.log("冻结", row);
            },
          },
        },
        { title: "更新于", field: "update_time", width: "180" },
        {
          title: "操作",
          width: "280",
          type: "btn",
          payload: [
            {
              name: "修改用户",
              type: "primary",
              click: (row) => console.log("修改", row),
            },
            {
              name: "分配角色",
              type: "success",
              click: (row) => console.log("分配角色", row),
            },
            {
              name: "修改用户",
              type: "danger",
              click: (row) => console.log("删除", row),
            },
          ],
        },
      ],
      tableData: tableData.data,
    };
  },
};
</script>
